<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gradients</title>
    <style type="text/css">
        #div01 {
            width: 500px;
            height: 300px;
            /*background-color: yellowgreen;*/

            /*background: linear-gradient(red, blue);*/

            /*background: -webkit-linear-gradient(left, red, blue); !* Safari 5.1 - 6.0, Chrome *!*/
            /*background: -o-linear-gradient(left, red, blue); !* Opera 11.1 - 12.0 *!*/
            /*background: -moz-linear-gradient(left, red, blue); !* Firefox 3.6 - 15 *!*/
            /*background: linear-gradient(left, red, blue); !* 标准的语法 *!*/

            /*background: -webkit-linear-gradient(left top, red, blue); !* Safari 5.1 - 6.0, Chrome *!*/
            /*background: -o-linear-gradient(left top, red, blue); !* Opera 11.1 - 12.0 *!*/
            /*background: -moz-linear-gradient(left top, red, blue); !* Firefox 3.6 - 15 *!*/
            /*background: linear-gradient(left top, red, blue); !* 标准的语法 *!*/

            /*background: -webkit-linear-gradient(90deg, red, blue); !* Safari 5.1 - 6.0, Chrome *!*/
            /*background: -o-linear-gradient(90deg, red, blue); !* Opera 11.1 - 12.0 *!*/
            /*background: -moz-linear-gradient(90deg, red, blue); !* Firefox 3.6 - 15 *!*/
            /*background: linear-gradient(90deg, red, blue); !* 标准的语法 *!*/

            /*background: -webkit-linear-gradient(rgba(255, 0, 0, 0.5), green, blue); !* Safari 5.1 - 6.0, Chrome *!*/
            /*background: -o-linear-gradient(rgba(255, 0, 0, 0.5), green, blue); !* Opera 11.1 - 12.0 *!*/
            /*background: -moz-linear-gradient(rgba(255, 0, 0, 0.5), green, blue); !* Firefox 3.6 - 15 *!*/
            /*background: linear-gradient(rgba(255, 0, 0, 0.5), green, blue); !* 标准的语法 *!*/

            /*background: -webkit-repeating-linear-gradient(red 10%, green 20%, blue 60%); !* Safari 5.1 - 6.0, Chrome *!*/
            /*background: -o-repeating-linear-gradient(red 10%, green 20%, blue 60%); !* Opera 11.1 - 12.0 *!*/
            /*background: -moz-repeating-linear-gradient(red 10%, green 20%, blue 60%); !* Firefox 3.6 - 15 *!*/
            /*background: repeating-linear-gradient(red 10%, green 20%, blue 60%); !* 标准的语法 *!*/

            /*background: -webkit-radial-gradient(circle, red, yellow, green); !* Safari 5.1 - 6.0 *!*/
            /*background: -o-radial-gradient(circle, red, yellow, green); !* Opera 11.6 - 12.0 *!*/
            /*background: -moz-radial-gradient(circle, red, yellow, green); !* Firefox 3.6 - 15 *!*/
            /*background: radial-gradient(circle, red, yellow, green); !* 标准的语法 *!*/

            /*background: -webkit-radial-gradient(ellipse, red, yellow, green); !* Safari 5.1 - 6.0 *!*/
            /*background: -o-radial-gradient(ellipse, red, yellow, green); !* Opera 11.6 - 12.0 *!*/
            /*background: -moz-radial-gradient(ellipse, red, yellow, green); !* Firefox 3.6 - 15 *!*/
            /*background: radial-gradient(ellipse, red, yellow, green); !* 标准的语法*!*/

            background: -webkit-repeating-radial-gradient(ellipse, red, yellow, green); /* Safari 5.1 - 6.0 */
            background: -o-repeating-radial-gradient(ellipse, red, yellow, green); /* Opera 11.6 - 12.0 */
            background: -moz-repeating-radial-gradient(ellipse, red, yellow, green); /* Firefox 3.6 - 15 */
            background: repeating-radial-gradient(ellipse, red, yellow, green); /* 标准的语法*/
        }
    </style>
</head>
<body>
<div id="div01"></div>
</body>
</html>